<template>
  <div class="timeline">
    <Toolbar></Toolbar>
    <div class="content">
      <div
        class="now-line abs z100"
        :title="currentTimeStr"
        :style="{ left: `${currentTimePx}px` }"
      ></div>
      <Timescale :height="25" :width="durationPx" />
      <div class="tracks" :style="{ width: `${durationPx}px` }">
        <Track v-for="spine in sequence.spines" :spine="spine" :key="spine.id">
        </Track>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { computed, onMounted, onUnmounted } from 'vue'
import { secToTime } from '@/lib/util'
import Track from './Track.vue'
import Timescale from './Timescale.vue'
import Toolbar from './Toolbar.vue'

import { useTimeline } from '@/composables/timeline'
import { useShortcuts } from '@/composables/shortcuts'
import { useActions } from '@/composables/actions'
import { Clip } from '@/types'
const { currentTime, pxPerSec, duration, timelinePlayer } = useTimeline()
const { bind: bindShorcuts, unbind: unbindShortcuts } = useShortcuts()
const { bind: bindActions, unbind: unbindActions } = useActions()

onMounted(() => {
  bindShorcuts()
  bindActions()
})

onUnmounted(() => {
  unbindShortcuts()
  unbindActions()
})

const currentTimeStr = computed(() => secToTime(currentTime.value, false))
const currentTimePx = computed(() => currentTime.value * pxPerSec.value)
const durationPx = computed(() => duration.value * pxPerSec.value)
const sequence = {
  tracks: [
    {
      id: 0,
      name: '1',
      children: [
        {
          duration: 20,
          offset: 5,
          name: 'test',
        } as Clip,
      ],
    },
    {
      id: 1,
      name: '2',
      children: [
        {
          duration: 40,
          offset: 10,
          name: 'test',
        } as Clip,
      ],
    },
  ],
}
timelinePlayer.load(sequence)
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus">
@import '../../assets/varibles.styl'
.now-line
  width 0
  height 100%
  border 1px solid red
.timeline
  background #393939
.content
  overflow auto
  position relative
</style>
